<template>
  <view class="flex-col page">
<!--    <view class="page">-->
      <view class="list">
        <!-- 修改实验室名称 -->
        <view class="list-item" @click="modifyName()">
          <text class="font">实验室名称</text>
          <view class="flex-row space-x-4">
            <text class="font_3">{{ labomanage.name }}</text>
            <uni-icons class="right-icon" type="right" size="30rpx"/>
          </view>
        </view>

        <!-- 修改实验室位置 -->
        <view class="list-item" @click="navTo3(`/pages/choosecity/choosecity?location=${selectedCity}`)">
          <text class="font">实验室位置</text>
          <view class="flex-row space-x-8">
            <text class="font_3">{{ selectedCity }}</text>
            <uni-icons class="right-icon" type="right" size="30rpx"/>
          </view>
        </view>

        <!-- 全部设备数量 -->
        <view class="list-item" @click="navTo('/pages/allequips/allequips')">
          <text class="font">全部设备数量</text>
          <text class="font_3 text_5">{{ labomanage.serial_total }}个设备</text>
          <uni-icons class="right-icon" type="right" size="30rpx"/>
        </view>

        <!-- 房间管理 -->
        <view class="list-item" @click="navTo('/pages/roomsguanli/roomsguanli')">
          <text class="font">房间管理</text>
          <view class="flex-row space-x-6">
            <text class="font_3">{{ labomanage.room_total }}个房间</text>
            <uni-icons class="right-icon" type="right" size="30rpx"/>
          </view>
        </view>
      </view>
<!--    </view>-->

    <view class="flex-col justify-start items-start expert1" v-if="ModifyPopFrame">
      <ModifyPopFrame></ModifyPopFrame>
    </view>

    <div>
      <transition name="fade">
        <view v-if="ModifyPopFrame" @click="zzc1" class="zzc"></view>
      </transition>
    </div>

    <view>
      <view v-if="ModifyPopFrame">

        <view class="flex-row input-container" :class="{ 'focus': isFocused }" style="margin-left: 10%;">
          <input class="button" v-model="labomanage.name" style=" background-color: #f0f0f0;" @focus="handleFocus"
                 @blur="handleBlur"/>
        </view>
        <view class="flex-row" style="margin-left: 10%;">
          <button @click.stop="zzc1()" class="cancel"
                  style="margin-bottom:-4%; text-align:center; background-color: #d9d9d9;">
            <view style="font-size:31.5rpx ; color: #000; ">取消</view>
          </button>
        </view>
        <view class="flex-row" style="margin-left: 55%;">
          <button @click="modifylaborname()" class="sure"
                  style="margin-bottom:-4%; text-align: center; background-color: #428d86;">
            <view style="font-size:31.5rpx ; color: white; ">确定</view>
          </button>
        </view>

      </view>

    </view>
  </view>
</template>

<script>
//获取实验室信息
import {_labomanage} from "@/service/user.js"
//userinfo界面渲染接口
import {_getuserinfo} from "@/service/user.js"

import {_modifylaboloname} from "@/service/user.js"

import ModifyPopFrame from '@/components/ModifyPopFrame.vue'

export default {
  components: {
    ModifyPopFrame
  },
  data() {
    return {
      accountNum: '',
      selectedCity: '请选择',
      labomanage: {},//房间数组中的信息数组
      laboManage: [],//房间数组
      password: '',
      userinfo: {},
      ModifyPopFrame: false,
      isFocused: false,

      id_lab: ''
    };
  },


  onLoad() {
    let newdata;
    try {
      const value = uni.getStorageSync('choosecity');
      this.selectedCity = value.selectedCity
    } catch (e) {
      console.error(e);
    }
    try {
      const value = uni.getStorageSync('userInfo');
      if (value != null) {
        this.accountNum = value.accountNum;
        this.password = value.password
      }
    } catch (e) {
      console.error(e);
    }
    this.init()
    this.init1()
  },
  onShow() {
    //这里重写是因为APP端的页面返回会触发onShow，以此可以进行刷新
    let newdata;
    try {
      const value = uni.getStorageSync('choosecity');
      this.selectedCity = value.selectedCity
    } catch (e) {
      console.error(e);
    }
    try {
      const value = uni.getStorageSync('userInfo');
      if (value != null) {
        this.accountNum = value.accountNum;
        this.password = value.password
      }
    } catch (e) {
      console.error(e);
    }
    this.init()
    this.init1()
  },
  // onUnload(){
  //   //一个不怎么稳定的页面强制刷新方案，在本页面销毁时，强制重定向到上个页面
  //   let pages = getCurrentPages(); // 当前页面
  //   let beforePage = pages[pages.length - 1]; //上一个页面
  //   console.log(beforePage.$vm.route);
  //   setTimeout(()=>{
  //     uni.switchTab({
  //       url:"/"+beforePage.$vm.route
  //     });
  //   },500);
  // },
  methods: {
    handleFocus() {
      this.isFocused = true;
    },
    handleBlur() {
      this.isFocused = false;
    },
    zzc1() {
      this.ModifyPopFrame = false
    },
    modifyName() {
      this.ModifyPopFrame = !this.ModifyPopFrame
    },
    navTo(url) {
      uni.navigateTo({
        url: url,
        success(res) {
          console.log('成功啦', res);
        },
        fail(err) {
          console.log('失败啦', err);
        }
      })
    },
    navTo3(url) {
      uni.navigateTo({
        url: url,
        events: {
          selectedCity: (data) => {
            this.selectedCity = data;
          }
        }
      });
    },
    navTo1(url) {
      uni.switchTab({
        url: url,
        success(res) {
          console.log('成功啦', res);
        },
        fail(err) {
          console.log('失败啦', err);
        }
      })
    },
    async init() {
      let data = {
        user: this.accountNum
      }
      let res = await _labomanage(data)
      console.log(res.data)
      this.laboManage = res.data
      for (let i = 0; i < this.laboManage.length; i++) {
        this.labomanage = this.laboManage[i]

        this.id_lab = this.laboManage[i].id
        console.log(this.id_lab)
        break;
      }
    },

    async init1() {
      let data = {
        account_user: this.accountNum,
        password_user: this.password
      }
      let res = await _getuserinfo(data);
      console.log(res.data);
      this.userinfo = res.data
      this.selectedCity = this.userinfo.laboratorylocation_user
      console.log(this.selectedCity)
    },
    async modifylaborname() {
      let data = {
        owner: this.accountNum,
        name: this.labomanage.name
      }
      let res = await _modifylaboloname(data)
      if (res.flag) {
        this.zzc1()
      }
      console.log(this.labomanage.name)

      // uni.setStorage({
      // 	key:'laboraname',
      // 	data:this.labomanage.name
      // })
    },
    // sendMessage() {
    //     uni.$emit('roomadd', this.id_lab)
    // }
  },
};
</script>

<style scoped lang="css">
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  transition: background-color 0.25s;

  &:active {
    background-color: #f0f0f0; // 高亮背景色
  }

  .right-icon {
    font-weight: bold;
  }

  .font {
    font-size: 30rpx;
    color: #000000;
  }
}

.list {
  background-color: #ffffff;
  border-radius: 50rpx;
  margin: 30rpx;
}

.button {
  width: 80%;
  height: 6%;
  border-radius: 25rpx;
  z-index: 9999999;
  position: fixed;
  bottom: 12.2%;
}

.input-container .button {
  border: 2px solid #f0f0f0;
  transition: border-color 0.3s;
}

.input-container.focus .button {

  border-color: #428d86; /* 设置聚焦时的边框颜色 */
}

.cancel {
  width: 260rpx;
  height: 80rpx;
  border-radius: 50rpx;
  z-index: 9999999;
  position: fixed;
  bottom: 80rpx;
}

.sure {
  width: 260rpx;
  height: 80rpx;
  border-radius: 50rpx;
  z-index: 9999999;
  position: fixed;
  bottom: 80rpx;

}

.zzc {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background-color: #000;
}

.expert1 {
  z-index: 9999;
  //padding: 225rpx 0 725rpx;
  margin: 90rpx 0rpx 0rpx 0rpx;
}

/* 定义进入和离开过程中的活动状态类 */
.fade-enter-active,
.fade-leave-active {
  /* 使用 opacity 属性来设置透明度变化的过渡动画效果，动画时间为 0.2 秒 */
  transition: opacity 0.2s ease-in-out;
}

/* 定义进入时的目标状态类和离开时的目标状态类 */
.fade-enter,
.fade-leave-to {
  /* 设置组件的初始透明度为 0，即进入时完全透明 */
  opacity: 0;
}

.page {
  background-color: #e5e5e56e;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}

.space-y-20 > view:not(:first-child),
.space-y-20 > text:not(:first-child),
.space-y-20 > image:not(:first-child) {
  margin-top: 41.67rpx;
}

.group_2 {
  padding: 45.83rpx 0 604.17rpx;
  overflow-y: auto;
}

.space-y-22 > view:not(:first-child),
.space-y-22 > text:not(:first-child),
.space-y-22 > image:not(:first-child) {
  margin-top: 45.83rpx;
}

.group_3 {
  padding-left: 50rpx;
  padding-right: 25rpx;
}

.font_2 {
  font-size: 32rpx;
  font-family: SourceHanSansCN;
  line-height: 33.33rpx;
  color: #000000;
}

.space-x-4 > view:not(:first-child),
.space-x-4 > text:not(:first-child),
.space-x-4 > image:not(:first-child) {
  margin-left: 8.33rpx;
}

.font_3 {
  font-size: 29.17rpx;
  font-family: SourceHanSansCN;
  line-height: 27.08rpx;
  color: #808080;
}

.image_6 {
  width: 14.58rpx;
  height: 25rpx;
}

.section {
  padding: 41.67rpx 25rpx 41.67rpx 50rpx;
  background-color: #ffffff;
}

.space-x-8 > view:not(:first-child),
.space-x-8 > text:not(:first-child),
.space-x-8 > image:not(:first-child) {
  margin-left: 16.67rpx;
}

.space-y-24 > view:not(:first-child),
.space-y-24 > text:not(:first-child),
.space-y-24 > image:not(:first-child) {
  margin-top: 50rpx;
}

.group_4 {
  padding-bottom: 170.83rpx;
}

.image_7 {
  margin-right: 27.08rpx;
}

.pos_2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.group_5 {
  padding: 0 50rpx;
}

.text_5 {
  margin-right: -300.17rpx;
}

.section_2 {
  padding: 45.83rpx 27.08rpx 41.67rpx 50rpx;
  background-color: #ffffff;
}

.text_6 {
  line-height: 32.29rpx;
}

.space-x-6 > view:not(:first-child),
.space-x-6 > text:not(:first-child),
.space-x-6 > image:not(:first-child) {
  margin-left: 12.5rpx;
}

.group_6 {
  padding-left: 50rpx;
  padding-right: 27.08rpx;
}
</style>
